<template>
  <div class="card-container">
    <div class="min-img">
      <img
        v-for="(item, index) in imgList"
        :src="imgUrl + item.currentPhotoUrl"
        :key="index"
        class="img"
        :class="{ borderStyle: index == currentIndex }"
        @click="handleClick(index)"
      />
    </div>
    <div style="width: calc(100% - 220px)">
      <template v-for="(item, index) in imgList" :key="index">
        <ConciseCanvas :imgUrl="imgUrl + item.currentPhotoUrl" v-if="index == currentIndex" />
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue'
import ConciseCanvas from './conciseCanvas.vue'
import { showPaper } from '/@/api/organization/examinationPaper'
import { useTeacherMarkStore } from '/@/store/modules/teacherMark'
import { useGlobSetting } from '/@/hooks/setting'
const { imgUrl } = useGlobSetting()

const teacherMarkStore = useTeacherMarkStore()

const imgList = ref<any>([])

const props = defineProps({
  questions: {
    type: Object,
    default: '',
  },
})

const questions = computed(() => teacherMarkStore.getQuestions)
const getImgList = async () => {
  imgList.value = []
  const { code, data } = await showPaper({
    kmdm: props.questions.kmdm,
    kmYear: props.questions.kmYear,
    zkzh: props.questions.zkzh,
    pyId: props.questions.pyAutoId,
  })

  if (code == 200) {
    imgList.value = data
  }
}

const currentIndex = ref(0)
const handleClick = index => {
  currentIndex.value = index
}

watch(
  () => questions.value.zkzh,
  () => {
    getImgList()
  }
)

onMounted(() => {
  getImgList()
})
</script>

<style scoped lang="less">
.card-container {
  display: flex;
  width: 100%;
  height: 100%;
  .min-img {
    height: @c_height;
    width: 220px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    .img {
      margin-top: 20px;
      width: 180px;
      height: 140px;
      border: 1px solid #666;
      cursor: pointer;
    }

    .borderStyle {
      border: 1px solid red;
    }
  }
}
</style>
